<template>
    <div class="tab-box">
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
            </keep-alive>
            <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
        </router-view>
        <van-tabbar route active-color="black" inactive-color="#999999">
            <van-tabbar-item to="/home" icon="home-o" @click="scroll">首页</van-tabbar-item>
            <van-tabbar-item to="/category" icon="shop-collect-o" @click="scroll">商品分类</van-tabbar-item>
            <van-tabbar-item to="/bags" icon="bag-o" @click="scroll">购物袋</van-tabbar-item>
            <van-tabbar-item to="/mine" icon="user-o" @click="scroll">我的账户</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script lang="ts" setup>
function scroll() {
    sessionStorage.removeItem('scrollTop')
}
</script>

<style lang="less" scoped>
.tab-box{
    height:calc(100% - 50px);
}
</style>